<template>
<div ref="el"></div>
</template>

<script setup>
import 'js/lib/editor/ace'
import {ref,onMounted,watch} from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({modelValue: String})
const el=ref(null)
let editor=null
onMounted(()=>{
  editor=ace.edit(el.value)
  editor.session.setMode("ace/mode/json");
  if(props.modelValue){
    editor.setValue(props.modelValue)
  }

  editor.session.on('change',function(e){
    emit('update:modelValue',editor.getValue())
  })
})
watch(props,(props)=>{
  if(editor.getValue()!=props.modelValue){
    editor.setValue(props.modelValue)
  }
})
</script>

<style scoped>

</style>
